<template>
    <div>
        <van-nav-bar
                title="评价"
                left-text=""
                left-arrow
                @click-left="onClickLeft('CarWashCalendar')"
        />
        <van-row style="margin-top: 10px; margin-left: 9px; text-align: left">
            <van-col
                    span="24"
                    style="font-size: 20px; font-weight: 700; margin-left: 10px"
            >
                <div style="margin-bottom: 10px">{{ storeName }}</div>
            </van-col>
        </van-row>
        <van-field name="rate" label="店铺评价">
            <template #input>
                <van-rate v-model="rate" />
            </template>
        </van-field>

        <van-field
                v-model="message"
                rows="3"
                autosize
                label=""
                type="textarea"
                placeholder="请输入您对门店的评价"
        />

        <van-field label="添加照片" readonly placeholder="最多只能添加一张图片" />
        <div style="float: left; margin-left: 10px">
            <img :src="pictureUrl" v-if="pictureUrl" width="80px" height="80px" />
        </div>
        <van-field name="uploader" v-if="pictureUrl == ''">
            <template #input>
                <!-- 上传图片操作 -->
                <van-uploader
                        :after-read="afterRead"
                        :before-read="beforeRead"
                        :max-count="1"
                        :src="pictureUrl"
                />
            </template>
        </van-field>

        <van-field name="checkbox">
            <template #input>
                <van-checkbox v-model="checkbox">匿名评价</van-checkbox>
            </template>
        </van-field>

        <van-button round class="btn" type="submit" @click="commitReview()"
        >提交</van-button
        >
    </div>
</template>
<script>
import Vue from "vue";
import { Uploader } from "vant";
import axios from "axios";
export default {
    data() {
        return {
            rate: 5, //店铺星级
            checkbox: true, //是否匿名,默认匿名
            storeName: "",
            message: "", //评价信息
            pictureUrl: "", //评价图片
            //评价信息
            info: {
                storeId: "", //门店id
                userId: "", //用户id
                content: "", //评价内容
                evaluateTime: "", //评价时间
                picture: "", //评价图片
                star: "", //评价等级
                orderId: "", //洗车记录id
            },
        };
    },
    created() {
        this.storeName = this.$route.query.storeName;
        this.info.orderId = this.$route.query.orderId;
        this.info.userId = this.$route.query.userId;
        this.info.storeId = this.$route.query.storeId;
    },
    methods: {
        //1,返回上一级
        onClickLeft(uri) {
            this.$router.push(
                uri,
                () => {},
                () => {}
            );
        },

        //添加评价
        commitReview() {
            var _this = this;
            this.info.star = this.rate;
            this.info.content = this.message;
            if (this.checkbox) {
                this.info.userId = 0;
            }
            alert("是否提交评论");
            this.$http
                .post("/store/evaluate/insertStoreEvaluate", this.info)
                .then(function (response) {
                    if (response.data.code == 200) {
                        _this.$toast("评价成功！");
                        _this.$router.push("/CarWashCalendar");
                    }
                })
                .catch(function (error) {
                    // _this.$toast("你错了。。。");
                });
        },

        //上传图片
        afterRead(file2) {
            // 此时可以自行将文件上传至服务器
            console.log(file2);
            //在这块创建FormData对象
            // FormData 对象的使用：
            // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
            // 2. 异步上传二进制文件。
            //上传图片需要转换二进制这里要用到FormData
            const forms = new FormData();
            //这里的file1表示给后台传的属性名字，这里看接口文档需要传的的属性
            forms.append("file", file2.file); // 获取上传图片信息
            //向后端发送相应的请求
            //这块的url是具体的交互接口
            //headers是上传图片需要用到的响应头，此处的token是后端那边给设置的，所以我请求的时候需要带上token，
            //token根据实际情况自行添加
            this.$http.post("/store/station/uploadFile", forms, {
                    headers: {
                        "content-type": "multipart/form-data",
                        token: this.token,
                    },
                })
                .then(res => {
                    //如果传入的响应状态码为200，则成功将文件发送给后台
                    this.info.picture=res.data.data;
                    this.pictureUrl=res.data.data;
                });
        },

        //上传图片之前判断图片是否符合条件
        beforeRead(file) {
            if (file.type !== "image/jpeg" && file.type !== "image/png") {
                Toast("请上传 jpg/png 格式图片");
                return false;
            }
            let isLt1M = file.size / 1024 / 1024 <= 5;
            if (!isLt1M) {
                Toast("图片大小5M以内");
                return false;
            }
            return true;
        },
    },
    components: {
        // 组件注册的地方 相当于pom文件
    },
};
</script>
<style scoped>
p {
    margin: 0px;
    margin-bottom: 136px;
    margin-left: 10px;
}

.van-cell__title,
.van-cell__value {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: left;
}

.van-cell__value {
    position: relative;
    overflow: hidden;
    color: #969799;
    vertical-align: middle;
    word-wrap: break-word;
    text-align: left;
}

.van-field__label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 12px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
    font-weight: 700;
}

.btn {
    width: 100%;
    color: white;
    font-size: 16px;
    background-color: rgb(1, 159, 232);
    border: 0px;
    margin-top: 100px;
}
</style>